<template>
  <div class="w-full h-full flex justify-center items-center bg-login bg-repeat-x bg-cover">
    <div class="shadow-2xl h-[550px] flex justify-center items-center">
      <div class="w-[450px] h-full p-5  flex flex-col justify-center items-center bg-amber-500">
        <img class="w-36 h-36 mb-5 cursor-pointer" src="../../assets/img/logo.png" fit="fill" @click="router.push('/')" />
        <div class="text-3xl">{{ title }}</div>
      </div>
      <login-wrapper @qqLogin="qqLogin" @wxLogin="wxLogin" @goPhone="switchOperate('phone')"
        @goRegister="switchOperate('register')" v-if="operation === 'login'" />
      <register-wrapper v-else-if="operation === 'register'" @goLogin="switchOperate('login')" />
      <phone-wrapper v-else-if="operation === 'phone'" @goLogin="switchOperate('login')" />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import LoginWrapper from './components/LoginWrapper.vue'
import RegisterWrapper from './components/RegisterWrapper.vue'
import PhoneWrapper from './components/PhoneWrapper.vue'
import { useSiteStore } from '@/store/index'
import { useUsersStore } from '@/store/modules/user'
import { useRouter } from 'vue-router'
const router = useRouter()
const { title } = useSiteStore()
const siteTitle = import.meta.env.VITE_APP_SITE_TITLE
const { set_login_operation, login_operation } = useUsersStore()
const operation = ref(login_operation)
const setSiteTitle = (val) => {
  document.title = {
    'login': '登录',
    'register': '注册',
    'phone': '短信登录'
  }[val] + ' | ' + siteTitle
}
setSiteTitle(login_operation)
const switchOperate = (opera) => {
  setSiteTitle(opera)
  operation.value = opera
  set_login_operation(opera)
}
const qqLogin = () => {
  ElMessage({
    message: '还没写哦',
    grouping: true,
    type: 'error',
  })
}
const wxLogin = () => {
  ElMessage({
    message: '还没写哦',
    grouping: true,
    type: 'error',
  })
}
</script>